<template>
  <el-container>
    <el-aside width="200px">
      <!--    4.4 动态渲染菜单数据并进行路由控制

通过 v-for 双层循环分别进行一级菜单和二级菜单的渲染
通过路由相关属性启用菜单的路由功能

-->
      <el-menu
        @open="handleOpen"
        @close="handleClose"
        default-active="110"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >


        <!--  外层 -->
        <!-- index 必须是一个字符串 -->
        <el-submenu

        
          
          v-for="(items) in menusData"
          :key="items.id"
          :index="items.id +''"   
        >
          <template slot="title">
            <i class="el-icon-location"></i>
        {{ items.authName }}----{{items.id}}
          </template>

          <!--  内层开始 -->
          <el-menu-item v-for="(sItem) in items.children" 
          :key="sItem.id"


           class="menuItem"
           :index="'/'+sItem.path"
          
          >
            <i class="el-icon-menu"></i>
          {{ sItem.authName }} ---{{sItem.id}}
          </el-menu-item>
           <!--  内层结束 -->
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-button type="danger" @click="logout">危险退出</el-button>
      </el-header>

      <!-- 路由入口 -->
     <el-main>
        
          <router-view></router-view>

        
        </el-main> 
    
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      //左侧导航栏数据
      menusData: [],
    };
  },

  created() {
   
  },
  mounted() {
    
     this.getMenusData();
  },

  // 基于 token 的方式实现退出比较简单，
  // 只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token
  // ，必须重新登录生成一个新的 token 之后才可以访问页面。

  methods: {
    //第一步获取左侧列表的数据
    //  url   menus
    async getMenusData() {

      
      let { data :{data,meta}} = await this.$http.get("menus");

      console.log(data)
      this.menusData = data;
    },

    logout() {
      this.$confirm("是否真的要退出?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
            duration: 500,
          });
          window.sessionStorage.clear(); // 清除所有的缓存
          // window.sessionStorage.removeItem('token') //清除指定的token
          setTimeout(() => {
            this.$router.replace("/login");
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出",
            duration: 500,
          });
        });
    },

    //menu 打开
    handleOpen() {},

    //menu 折叠
    handleClose() {},
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu-item {
  padding-left: 80px !important;
}
</style>
